<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-operator">
        <a-form layout="inline">
          <a-form-item>
            <a-input placeholder="手机号" v-model="queryParam.mobile"></a-input>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" @click="handleSearch(true)" icon="search">查询</a-button>
          </a-form-item>
        </a-form>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="id"
        :columns="columns"
        :data="loadData"
        showPagination="auto"
        :pagination="pagination"
      >
        <template slot="head_img" slot-scope="text">
          <a-avatar shape="square" :size="32" icon="user" :src="text" />
        </template>
        <a-badge :status="takeDispaly(text)" :text="text | takeFilter" slot="is_take" slot-scope="text" />
        <span slot="action" slot-scope="text, record">
          <a @click="handleDetail(record)">详情</a>
          <template v-if="record.is_take === 1">
            <a-divider type="vertical"></a-divider>
            <a @click="handleSend(record)">发货</a>
          </template>
        </span>
      </s-table>
    </a-card>
    <create-drawer ref="createDrawer" :columns="columns.slice(0, -2)" />
    <vip-send-modal ref="vipSendModal" @ok="handleSearch" />
  </page-header-wrapper>
</template>

<script>
import { vipList } from '@/api/stat'
import CreateDrawer from './modules/VipDrawer'
import formTableMixin from '@/mixins/formTableMixin'
import VipSendModal from './modules/VipSendForm'
const columns = [
  {
    title: '头像',
    dataIndex: 'head_img',
    scopedSlots: { customRender: 'head_img' }
  },
  {
    title: '昵称',
    dataIndex: 'name'
  },
  {
    title: '手机号',
    dataIndex: 'mobile'
  },
  {
    title: '会员开始日期',
    dataIndex: 'atime'
  },
  {
    title: '会员结束日期',
    dataIndex: 'etime'
  },
  {
    title: '服务地址',
    dataIndex: 'serve_address',
    width: '400px'
  },
  {
    title: '快递单号',
    dataIndex: 'kd_num'
  },
  {
    title: '快递公司',
    dataIndex: 'kd_gs'
  },
  {
    title: '状态',
    dataIndex: 'is_take',
    scopedSlots: { customRender: 'is_take' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: '150px',
    scopedSlots: { customRender: 'action' }
  }
]

const TAKE_STATUS = {
  1: '未发货',
  2: '已发货'
}

const TAKE_DISPLAY = {
  1: 'processing',
  2: 'success'
}

export default {
  name: 'VipList',
  mixins: [formTableMixin],
  components: {
    CreateDrawer,
    VipSendModal
  },
  data () {
    this.columns = columns
    this.listAction = vipList
    return {}
  },
  filters: {
    takeFilter (take) {
      return TAKE_STATUS[take]
    }
  },
  methods: {
    takeDispaly (take) {
      return TAKE_DISPLAY[take]
    },
    handleSend (record) {
      this.$refs.vipSendModal.show(record)
    }
  }
}
</script>
